<template>
  <div>
    <h1>modules使用</h1>
    <h2>state</h2>
    <h3>{{ $store.state.user.username }}</h3>
    <button @click="$store.commit('user/setUsername', '李四')">
      调用mutations
    </button>
    <button @click="$store.dispatch('user/refreshName')">调用actions</button>
    <h3>{{ $store.getters['user/getUserName'] }}</h3>
    <hr />
    <h1>map函数的使用</h1>
    <!-- mapState,mapMutations,mapActions,mapGetters -->
    <!-- mapState:
       1:导入 import {mapState} from 'vuex'
       2:定义：computed:{...mapState('user',['username'])}
       3:访问：this.username
       所有的map函数改名：
       ...mapState('模块名',{新的名字:旧的名字})
     -->
    <h3>{{ userxxx }}</h3>
    <!-- mapMutations:
         1:导入 import {mapMutations} from 'vuex'
         2:定义
            methods:{
              ...mapMutations('user',['setUsername']), 
              ...mapMutations(['user/setUsername']),
            }
         3:访问  
         ...mapMutations('user',['setUsername']),  this.setUsername(实参)
         ...mapMutations(['user/setUsername']),    this['user/setUsername'](实参)
     -->
    <button @click="btnClick">调用mutations</button>
    <!-- mapActions:
         1:导入 import {mapActions} from 'vuex'
         2:定义
            methods:{
              ...mapActions('user',['refreshName']), 
              ...mapActions(['user/refreshName']),
            }
         3:访问  
         ...mapActions('user',['refreshName']),  this.refreshName(实参)
         ...mapActions(['user/refreshName']),    this['user/refreshName'](实参)
     -->
    <button @click="btnClick2">调用actions</button>
    <!-- mapGetters:类似于mapState
        1:import {mapGetters} from 'vuex'
        2:定义：
            computed:{
              ...mapGetters('模块名',['方法名'])
            }
        3:访问:this.方法名
     -->
    <h3>{{ getUserName }}</h3>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      username: 'xxx'
    }
  },
  computed: {
    // ...mapState('user', ['username'])
    ...mapState('user', { userxxx: 'username' }),
    ...mapGetters('user', ['getUserName'])
  },
  methods: {
    // ...mapMutations('user', ['setUsername']),
    ...mapMutations(['user/setUsername']),
    ...mapActions('user', ['refreshName']),
    btnClick () {
      // this.setUsername(Date.now())
      this['user/setUsername'](Date.now())
    },
    btnClick2 () {
      this.refreshName()
    }
  }
}
</script>
<style></style>
